<template>
  <div class="person">
    <h1>一辆{{ car.brand }}车</h1>
    <h1>价格{{ car.price }}</h1>
    <button @click="ChangePrice">修改汽车的价格</button>
    <button @click="ChangeBrand">修改汽车的品牌</button>
    <button @click="ChangeCar">修改汽车</button>
    <br>
    <h2>求和：{{sum}}</h2>
    <button @click="Sum">求和</button>

  </div>
</template>

<script setup name="Person">
import { ref,reactive } from 'vue'
// 数据
let car =reactive({  brand: '奔驰', price: 100 })
let sum=ref(0)


function ChangePrice() {
  car.price += 100
}
function ChangeBrand() {
  car.brand = '宝马'
}
function Sum(){
  sum.value=sum.value+1
}
function ChangeCar(){
  //用下面这种方法可以更新内容
  Object.assign(car,{brand:'奥迪',price:200})
  //如果用ref则直接car.value={brand:'奥迪',price:200}
}



</script>

<style>
.person {
  background-color: burlywood;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
</style>
